<template>
  <view>
    <uni-nav-bar backgroundColor="linear-gradient(0deg, #597EF7 100%, #2F54EB 0%) !important"
                 color="#FFFFFF" title="报警">
    </uni-nav-bar>
    <view style="background-color: #FFFFFF">
      <uv-tabs
          :list="tabs"
          lineWidth="0"
          :scrollable="false"
          :current="current"
          lineColor="#2F54EB"
          :activeStyle="{
              color: '#2F54EB',
              fontWeight: 'bold',
              fontSize: '16px',
              transform: 'scale(1.05)',
              backgroundColor: 'rgba(47,84,235,0.29)',
              width: '95%',
              height: '100%',
              textAlign: 'center',
              borderBottom: '8px solid #2F54EB',
              lineHeight: '45px',
            }"
          :inactiveStyle="{
              color: '#606266',
              transform: 'scale(1)',
            }"
          itemStyle="padding: 0; height: 45px;"
          @click="changeTab"
      >
      </uv-tabs>
    </view>
    <view >
      <view v-for="(item, index) in alertList" :key="index">
        <uni-card>
          <template v-slot:title>

            <view>
              {{item.alertName}}（测试网点）

            </view>


          </template>
          <template v-slot:actions>
            <view>
              <uv-row>
                <uv-col span="24">
                  <text>报警时间：{{new Date(item.createTime).toLocaleString()}}</text>
                </uv-col>
              </uv-row>
              <uv-row>
                <uv-col span="24">
                  <text>解除时间：{{new Date(item.createTime).toLocaleString()}}</text>
                </uv-col>
              </uv-row>
              <uv-row>
                <uv-col span="24">
                  <text>解除：设备端解除</text>
                </uv-col>
              </uv-row>
            </view>

          </template>
        </uni-card>
      </view>
    </view>
    <tab-bar :current-page="3" />
  </view>
</template>

<script>
  import {getAlertPage} from "@/api/device/alert";
  import TabBar from "@/components/tab-bar/TabBar.vue";

  export default {
    components: {TabBar},
    data() {
      return {
        editMode: false,
        list: [],
        current: 0,
        tabs: [{
          name: '全部',
        },
          {
            name: '未解除',
          },
          {
            name: '已解除',
          }],
        alertList: []
      }
    },
    methods: {
      changeTab(index) {

      }
    },
    onLoad() {
      getAlertPage(0, 10).then((res) => {
        console.log(res);
        this.alertList = res.data.list;
      });
    }
  }

</script>

<style lang="scss" scoped>
  :deep(.ui-fixed) {
    height: 72rpx;
  }

  .cart-box {
    width: 100%;

    .cart-header {
      height: 70rpx;
      background-color: #f6f6f6;
      width: 100%;
      position: fixed;
      left: 0;
      top: v-bind('sys_navBar') rpx;
      z-index: 1000;
      box-sizing: border-box;
    }

    .cart-footer {
      height: 100rpx;
      background-color: #fff;

      .pay-btn {
        width: 180rpx;
        height: 70rpx;
        font-size: 28rpx;
        line-height: 28rpx;
        font-weight: 500;
        border-radius: 40rpx;
      }
    }

    .cart-content {
      margin-top: 70rpx;

      .goods-box {
        background-color: #fff;
      }
    }
  }
</style>
